<template>
  <div class="centerTop-content" v-if="pageFlag">
    <div class="content-title" >
      <div class="title-zuo"></div>
      <span class="title-span">&nbsp;&nbsp;数据总览&nbsp;&nbsp;</span>
      <div class="title-you"></div>
    </div>
    <dv-border-box-13 class="content-main">
      <div class="main-top">
        <li v-for="(item,index) in saleCfgs" :key="index">
          <span>{{ item.name }}</span>
          <dv-digital-flop :config="item.cfg" style="height: 44px;"></dv-digital-flop>
        </li>
        <li>
          <span>本年累计碳排放</span>
          <dv-digital-flop :config="yearCfg" style="height: 44px;"></dv-digital-flop>
        </li>
        <li>
          <span>本月累计碳排放</span>
          <dv-digital-flop :config="monthCfg" style="height: 44px;"></dv-digital-flop>
        </li>
        <li>
          <span>今日累计碳排放</span>
          <dv-digital-flop :config="dayCfg" style="height: 44px;"></dv-digital-flop>
        </li>
      </div>
      <div class="main-bottom">
        <h2>碳排放排行榜</h2>
        <dv-scroll-board :config="listCfg" style="width: 95%;height: 300px;margin-left: 20px;"></dv-scroll-board>
      </div>
    </dv-border-box-13>
  </div>
  <reacquire v-else @click="getData"></reacquire>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
import {currentGET} from '../../api/modules' 
export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      saleCfgs:[
        {
          name:'今年累计销售额',
          cfg:{
            number:[0],
            toFixed:2,
            textAlign:'left'
          }
        },
        {
          name:'本月累计销售额',
          cfg:{
            number:[0],
            toFixed:2,
            textAlign:'left'
          }
        },
        {
          name:'今日累计销售额',
          cfg:{
            number:[0],
            toFixed:2,
            textAlign:'left'
          }
        },
      ],
      yearCfg:{
        number:[0],
        toFixed:2,
        textAlign:'left'
      },
      monthCfg:{
        number:[0],
        toFixed:2,
        textAlign:'left'
      },
      dayCfg:{
        number:[0],
        toFixed:2,
        textAlign:'left'
      },
      listCfg:{
        header:['设备','生产数量','碳排放'],
        data:[],
        index:true,
        headerBGC:'#101326',
        oddRowBGC:'#101326',
        evenRowBGC:'#191b34',
        rowNum:7,
      }
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    getSale(){
      currentGET('big4').then(res=>{
        if (res.success) {
          this.saleCfgs[0].cfg={
            ...this.saleCfgs[0].cfg,
            number:[res.data.yearTotal]
          }
          this.saleCfgs[1].cfg={
            ...this.saleCfgs[1].cfg,
            number:[res.data.monthTotal]
          }
          this.saleCfgs[2].cfg={
            ...this.saleCfgs[2].cfg,
            number:[res.data.todayTotal]
          }
        }else{
          this.pageFlag = false
        }
      })
    },
    getYear(){
      currentGET('big5').then(res=>{
        if (res.success) {
          this.yearCfg={
            ...this.yearCfg,
            number:[res.rows[0].totalCarbonEmission]
          }
        }else{
          this.pageFlag = false
        }
      })
    },
    getMonth(){
      currentGET('big6').then(res=>{
        if (res.success) {
          this.monthCfg={
            ...this.monthCfg,
            number:[res.rows[0].totalCarbonEmission]
          }
        }else{
          this.pageFlag = false
        }
      })
    },
    getDay(){
      currentGET('big7').then(res=>{
        if (res.success) {
          this.dayCfg={
            ...this.dayCfg,
            number:[res.rows[0].totalCarbonEmission]
          }
        }else{
          this.pageFlag = false
        }
      })
    },
    getList(){
      currentGET('big8',{
        pageSize:20,
        pageNum:1
      }).then(res=>{
        if (res.success) {
          let newData = []
          res.rows.forEach(item => {
            newData.push([item.equipmentName,item.productQuantity,item.totalCarbonEmission])
          });
          this.listCfg={
            ...this.listCfg,
            data:newData
          }
        }else{
          this.pageFlag = false
        }
      })
    },
    getData(){
      this.getSale()
      this.getYear()
      this.getMonth()
      this.getDay()
      this.getList()
      this.pageFlag = true
      this.switper()
    },
    switper(){
      if(this.timer){
        return
      }
      this.timer = setInterval(()=>{
        this.getData()
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>
.centerTop-content{
  height:80%;
  .content-title{
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;

    .title-zuo,
    .title-you{
      background-size: cover;
      width: 30px;
      height: 21px;
    }
    .title-zuo{
      background-image: url('../../assets/img/xiezuo.png');
    }
    .title-you{
      background-image: url('../../assets/img/xieyou.png');
    }

    .title-span{
      font-size: 32px;
      font-weight: 500;
      letter-spacing: 3px;
      background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .content-main{
    height: 80%;

    .main-top{
      padding: 20px;
      display: flex;
      flex-wrap: wrap;

      li{
        flex-basis: 33%;
        margin-bottom: 20px;
      }
    }
    .main-bottom{
      h2{
        margin-left: 20px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>